<template>
  <a-modal
    title='多数据告警链详情'
    :width='1000'
    :visible='visible'
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <business-layout title='历史数据' custom-title>
      <div style='height: 100%;'>
        <div style='height: 100%;'>
          <div style='height: 10%'>
            <a-row>
              <a-form :form='form' layout='inline' @submit='handleQueryData'>
                <a-form-item label=''>
                  <a-date-picker showTime allowClear v-decorator="['startTime' ]" valueFormat='YYYY-MM-DD HH:mm:ss' />
                </a-form-item>
                <a-form-item label=''>
                  <a-date-picker showTime allowClear v-decorator="['endTime']" valueFormat='YYYY-MM-DD HH:mm:ss' />
                </a-form-item>
                <a-form-item>
                  <a-button type='primary' html-type='submit'>
                    <a-icon type='search' />
                    查询
                  </a-button>
                </a-form-item>
              </a-form>
            </a-row>
          </div>
          <div style='height: 300px'>
            <line-chart
              multiple
              v-show='xData.length'
              :loading='chartloading'
              height='100%'
              width='100%'
              :id='"line-person-env"'
              :legendList='legendList'
              :x-data='xData'
              :y-data='yData'
            />
            <a-empty style='height: 100%' v-show='!xData.length'></a-empty>
          </div>
        </div>
      </div>
    </business-layout>

  </a-modal>
</template>

<script>
import { Ellipsis, STable } from '@/components'
import { LineChart } from '@/business-components/charts'
import {
  multiDeviceAbnormalGraphData
} from '@/api/customReport'
import moment from 'moment'

let id = 0

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    DatagroupId: {
      type: String,
      default: () => null
    },
    activeKey: {
      type: Number,
      default: () => null
    }
  },
  components: {
    LineChart,
    STable,
    Ellipsis
  },
  watch: {
    DatagroupId(val) {
      if (val) {
        this.handleQueryData()
      }
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 }
      }
    }
    return {
      form: this.$form.createForm(this),
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      selectList: [],
      tabs: [],
      chartloading: false,
      yData: [],
      xData: [],
      legendList: []
    }
  },
  mounted() {
    this.handleQueryData()
  },
  methods: {
    moment,
    handleQueryData(e) {
      e.preventDefault()
      this.chartloading = true
      const that = this
      const values = this.form.getFieldsValue(['startTime', 'endTime'])
      multiDeviceAbnormalGraphData({ groupId: this.DatagroupId, ...values }
      ).then(res => {
        const { dataItems, unit } = res
        this.unit = unit
        if (dataItems) {
          const tempData = dataItems.map(item => item.abnormalValue.split(','))
          const tempName = dataItems[0].groupName.split('、')
          that.legendList = tempName.map(item => ({ name: item }))
          this.yData = that.legendList.map((item, index)=>{
            return tempData.map(vi=> vi[index] ? Number(vi[index]).toFixed(2) : 0)
          })
          that.xData = dataItems.map(item => moment(item.estimateTime).format('YYYY-MM-DD hh:mm'))
          that.chartloading = false
        } else {
          that.yData = []
          that.xData = []
        }
      })
    }
  },
  beforeDestroy() {

  }
}
</script>
